<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="聊天室,Netty,WebSocket">
    <meta name="author" content="Andy">
    <link rel="icon" href="./favicon.ico">
    <title>饭团聊天室 | 支持多人同时在线</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/chat.css">

</head>

<body>
    <div class="modal fade" id="menuModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="modalLabel">欢迎来到饭团聊天室</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="menuForm">
                        <input type="hidden" name="id" id="id" />
                        <div class="form-group">
                            <label for="nick" class="col-sm-2 control-label">昵称:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control validate[required]" name="nick" id="nick">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="loginBtn">登录</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">提示信息</h4>
                </div>
                <div class="modal-body" id="tipMsg" style="align:center;"></div>
            </div>
        </div>
    </div>

    <div class="container-fluid" id="chatWin" style="display:none;width:100%;">
        <div class="row top">
            <div class="col-sm-12" id="top">
                <div style="color:#fff;">
                    在线人数：<span id="userCount" style="color:#fff;">11220</span> 人
                </div>
            </div>
        </div>
        <div class="row">
            <div id="content">
            </div>
        </div>
        <div class="row" id="opt" style="height:40px; margin-bottom: 0px;">
            <div class="col-xs-2" style="padding:0;height:40px;line-height:40px;text-align:center;">
                <button id="faceBtn" style="height:40px;width:100%;outline:none;line-height:40px;">表情</button>
            </div>
            <div class="col-xs-8" style="padding:0;height:40px;line-height:40px;">
                <input type="text" id="mess" style="margin:0;width:100%;height:40px;outline:none;" />
            </div>
            <div class="col-xs-2" style="padding:0;">
                <button id="sendBtn" style="height:40px;width:100%;outline:none;line-height:40px;">send</button>
            </div>
        </div>
    </div>

    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.qqFace.js"></script>
    <script type="text/javascript" src="js/chat.js"></script>
</body>

</html>